<template>
    <view>
        <view class="toggle-btns">
            <view class="toggle-btn toggle-btn-left" :class="{'active': toggle==0}" @click="toggle=0">曲线</view>
            <view class="toggle-btn toggle-btn-right" :class="{'active': toggle==1}" @click="toggle=1">记录</view>
        </view>
        <view class="charts-box" v-if="toggle == 0">
            <qiun-data-charts type="area" :opts="opts" :chartData="chartData" />
        </view>
        <view class="record-box" v-if="toggle == 1">
            <view class="record-item no-arrow">
                <view class="record-age">年龄</view>
                <view class="record-height">身高</view>
            </view>
            <view class="record-item">
                <view class="record-age">2岁</view>
                <view class="record-height"><text>80</text>cm</view>
            </view>
            <view class="record-item">
                <view class="record-age">1岁半</view>
                <view class="record-height"><text>70</text>cm</view>
            </view>
            <view class="record-item">
                <view class="record-age">8个月</view>
                <view class="record-height"><text>60</text>cm</view>
            </view>
            <view class="record-item">
                <view class="record-age">出生</view>
                <view class="record-height"><text>40</text>cm</view>
            </view>
        </view>
        <button class="add-btn">添加记录</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                toggle: 0, //切换的状态（0曲线，1记录）
                chartData: {},
                opts: {
                    color: ["#666ee8"],
                    padding: [50, 15, 15, 15],
                    enableScroll: false,
                    legend: {},
                    xAxis: {
                        disableGrid: true
                    },
                    yAxis: {
                        gridType: "dash",
                        dashLength: 2,
                        data: [{
                            title: "单位：cm",
                            titleOffsetX: 8,
                            titleOffsetY: -20
                        }],
                        showTitle: true
                    },
                    extra: {
                        area: {
                            type: "straight",
                            opacity: 0.2,
                            addLine: true,
                            width: 2,
                            gradient: true,
                            activeType: "hollow"
                        }
                    }
                }
            }
        },
        methods: {
            getChartData() {
                //模拟从服务器获取数据时的延时
                setTimeout(() => {
                    let res = {
                        categories: ["出生", "8个月", "1年", "16个月", "2年"],
                        series: [{
                            name: "身高",
                            data: [50.0, 58.0, 70.0, 82.0, 85.0]
                        }]
                    };
                    this.chartData = JSON.parse(JSON.stringify(res));
                }, 500);
            },
        },
        onReady() {
            this.getChartData();
        }
    }
</script>

<style scoped>
    .toggle-btns {
        display: flex;
        justify-content: center;
        margin: 70rpx auto;
    }

    .toggle-btn {
        width: 220rpx;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        color: #999;
        background-color: #fff;
        border: 1px solid #f2f2f2;
        cursor: pointer;
    }

    .toggle-btn.active {
        color: #fff;
        background-color: #666ee8;
        border-color: #666ee8;
    }

    .toggle-btn-left {
        border-right: none;
        border-top-left-radius: 60rpx;
        border-bottom-left-radius: 60rpx;
    }

    .toggle-btn-right {
        border-left: none;
        border-top-right-radius: 60rpx;
        border-bottom-right-radius: 60rpx;
    }

    .charts-box {
        height: 300px;
        margin: 60rpx 40rpx 60rpx;
        background-color: #fff;
        border-radius: 8rpx;
        box-shadow: 0px 2px 10px rgba(204, 204, 204, 0.4);
    }

    .record-box {
        margin: 60rpx 40rpx 60rpx;
        background-color: #fff;
        border-radius: 8rpx;
        box-shadow: 0px 2px 10px rgba(204, 204, 204, 0.4);
    }
    
    .record-item {
        display: flex;
        height: 100rpx;
        line-height: 100rpx;
        padding: 0 50rpx;
        font-size: 28rpx;
        color: #333;
        border-bottom: 1px solid #f2f2f2;
        cursor: pointer;
    }

    .record-item::after {
        content: ">";
        font-size: 36rpx;
        color: #ccc;
    }

    .record-item.no-arrow::after {
        visibility: hidden;
    }

    .record-age,
    .record-height {
        flex: 1;
    }

    .record-height text {
        font-size: 36rpx;
        font-weight: bold;
        color: #666ee8;
    }

    .add-btn {
        height: 88rpx;
        line-height: 88rpx;
        margin: auto 40rpx;
        font-size: 32rpx;
        color: #fff;
        background-color: #666ee8;
        border: none;
        border-radius: 88rpx;
    }
</style>